<template>
	<view class="distribution-container">
		<!-- 分销员状态卡片 -->
		<view class="distributor-card">
			<view class="card-header">
				<view class="status-info">
					<text class="status-label">分销员状态</text>
					<view class="status-badge" :class="distributorStatus.class">
						<text class="status-text">{{ distributorStatus.text }}</text>
					</view>
				</view>
				<view class="level-info" v-if="isDistributor">
					<text class="level-label">等级</text>
					<text class="level-value">{{ distributorInfo.user_level_desc }}</text>
				</view>
			</view>

			<!-- 未认证状态 -->
			<view v-if="!isDistributor" class="auth-section">
				<view class="auth-tips">
					<text class="tips-text">成为分销员，享受专属优惠价格</text>
				</view>
				<button class="auth-btn" @click="toAuth">立即认证</button>
			</view>

			<!-- 已认证状态 -->
			<view v-else class="distributor-info">
				<view class="info-stats">
					<view class="stat-item">
						<text class="stat-number">{{ distributorInfo.team_usernum }}</text>
						<text class="stat-label">团队人数</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ distributorInfo.direct_money }}</text>
						<text class="stat-label">我的销售额</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ distributorInfo.direct_salenum }}</text>
						<text class="stat-label">我的订单</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="function-grid">
			<view class="function-item" v-for="(item, index) in functionList" :key="index"
				@click="handleFunctionClick(item)" :class="{ disabled: !isDistributor && item.requireAuth }">
				<view class="function-icon">
					<text class="function-emoji">{{ item.emoji }}</text>
				</view>
				<text class="function-name">{{ item.name }}</text>
				<view v-if="item.badge" class="function-badge">
					<text class="badge-text">{{ item.badge }}</text>
				</view>
			</view>
		</view>

		<!-- 升级条件 -->
		<view v-if="isDistributor" class="upgrade-section">
			<view class="section-header">
				<text class="section-title"> {{upgradeLevel}} 升级条件</text>
			</view>
			<view class="upgrade-progress">
				<view class="progress-item" v-for="(condition, index) in upgradeConditions" :key="index">
					<view class="condition-info">
						<text class="condition-name">{{ condition.name }}</text>
						<text class="condition-progress">{{ condition.current }}/{{ condition.target }}</text>
					</view>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: condition.progress + '%' }"></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				// 分销员状态
				isDistributor: false, // 是否已认证为分销员
				distributorInfo: {
					user_level_sort: 0,
					user_level_desc: '初级分销员',
					direct_usernum: 0,
					team_usernum: 0,
					direct_salenum: 0,
					team_salenum: 0,
					direct_money: 0.00,
					team_money: 0.00
				},
				// 功能列表
				functionList: [{
						name: '分销员认证',
						emoji: '🆔',
						path: '/fenxiao-package/distribution/auth',
						requireAuth: false
					},
					{
						name: '热销商品',
						emoji: '🔥',
						path: '/fenxiao-package/distribution/hot-products',
						requireAuth: true
					},
					{
						name: '团队排行',
						emoji: '🏆',
						path: '/fenxiao-package/distribution/team-ranking',
						requireAuth: true
					},
					{
						name: '团队成员',
						emoji: '👥',
						path: '/fenxiao-package/distribution/team-members',
						requireAuth: true
					},
					{
						name: '推广链接',
						emoji: '🔗',
						path: '/fenxiao-package/distribution/promotion',
						requireAuth: true
					},
					{
						name: '个人业绩',
						emoji: '📊',
						path: '/fenxiao-package/distribution/performance',
						requireAuth: true
					},
					{
						name: '佣金明细',
						emoji: '💰',
						path: '/fenxiao-package/distribution/commission-detail',
						requireAuth: true
					}
				],
				// 升级条件
				upgradeLevel: '',
				upgradeConditions: [{
						name: '直推人数',
						current: 0,
						target: 0,
						progress: 0
					},
					{
						name: '团队人数',
						current: 0,
						target: 0,
						progress: 0
					},
					{
						name: '直推销量',
						current: 0,
						target: 0,
						progress: 0
					},
					{
						name: '团队销量',
						current: 0,
						target: 0,
						progress: 0
					},
					{
						name: '直推销售额',
						current: 0,
						target: 0,
						progress: 0
					},
					{
						name: '团队销售额',
						current: 0,
						target: 0,
						progress: 0
					}
				]
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),

			// 分销员状态
			distributorStatus() {
				if (this.isDistributor) {
					return {
						text: '已认证',
						class: 'status-active'
					}
				} else {
					return {
						text: '未认证',
						class: 'status-inactive'
					}
				}
			}
		},
		onShow() {
			this.loadUserExtInfo()
		},
		methods: {
			// 检查分销员状态
			checkDistributorStatus() {
				this.isDistributor = this.userInfo.check_status === 2
			},

			loadUserExtInfo() {
				this.$api.user.GetUserExtInfo4().then(res => {
					if (res.data.userLevel) {
						this.userInfo.realname = res.data.userLevel.realname
						this.userInfo.birthday = res.data.userLevel.birthday
						this.userInfo.idcard_hidden = res.data.userLevel.idcard_hidden
						this.userInfo.mobile_hidden = res.data.userLevel.mobile_hidden
						this.userInfo.check_status = Number(res.data.userLevel.check_status)
						this.userInfo.last_check_time = res.data.userLevel.last_check_time
						this.userInfo.last_check_reason = res.data.userLevel.last_check_reason
						this.userInfo.submit_check_time = res.data.userLevel.submit_check_time
						this.$store.dispatch('updateUserInfo', this.userInfo);
						this.checkDistributorStatus();
					}
					if (res.data.userLevel && res.data.userLevel.id) {
						this.distributorInfo = res.data.userLevel
					}
					const nextLevel = res.data.nextLevel
					if (nextLevel) {
						this.upgradeLevel = nextLevel.level_name
						this.upgradeConditions = [{
								name: '直推人数',
								current: this.distributorInfo.direct_usernum,
								target: nextLevel.direct_usernum,
								progress: nextLevel.direct_usernum > 0 ? this.distributorInfo.direct_usernum /
									nextLevel.direct_usernum * 100 : 0
							},
							{
								name: '团队人数',
								current: this.distributorInfo.team_usernum,
								target: nextLevel.team_usernum,
								progress: nextLevel.team_usernum > 0 ? this.distributorInfo.team_usernum /
									nextLevel.team_usernum * 100 : 0
							},
							{
								name: '直推销量',
								current: this.distributorInfo.direct_salenum,
								target: nextLevel.direct_salenum,
								progress: nextLevel.direct_salenum > 0 ? this.distributorInfo.direct_salenum /
									nextLevel.direct_salenum * 100 : 0
							},
							{
								name: '团队销量',
								current: this.distributorInfo.team_salenum,
								target: nextLevel.team_salenum,
								progress: nextLevel.team_salenum > 0 ? this.distributorInfo.team_salenum /
									nextLevel.team_salenum * 100 : 0
							},
							{
								name: '直推销售额',
								current: this.distributorInfo.direct_money,
								target: nextLevel.direct_money,
								progress: nextLevel.direct_money > 0 ? this.distributorInfo.direct_money /
									nextLevel.direct_money * 100 : 0
							},
							{
								name: '团队销售额',
								current: this.distributorInfo.team_money,
								target: nextLevel.team_money,
								progress: nextLevel.team_money > 0 ? this.distributorInfo.team_money /
									nextLevel.team_money * 100 : 0
							}
						]
					}
				}).catch(err => {
					this.checkDistributorStatus()
				})
			},

			// 跳转到认证页面
			toAuth() {
				uni.navigateTo({
					url: '/fenxiao-package/distribution/auth'
				})
			},

			// 处理功能点击
			handleFunctionClick(item) {
				if (item.path && !item.requireAuth) {
					uni.navigateTo({
						url: item.path
					})
				} else if (item.path && item.requireAuth && this.isDistributor) {
					uni.navigateTo({
						url: item.path
					})
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.distribution-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 分销员状态卡片 */
	.distributor-card {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		color: white;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.status-info {
		display: flex;
		align-items: center;
	}

	.status-label {
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.status-badge {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.status-active {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.status-inactive {
		background-color: rgba(255, 193, 7, 0.8);
	}

	.level-info {
		display: flex;
		align-items: center;
	}

	.level-label {
		font-size: 24rpx;
		opacity: 0.8;
		margin-right: 10rpx;
	}

	.level-value {
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 认证区域 */
	.auth-section {
		text-align: center;
	}

	.auth-tips {
		margin-bottom: 30rpx;
	}

	.tips-text {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.auth-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 50rpx;
		padding: 0rpx 60rpx;
		font-size: 28rpx;
	}

	/* 分销员信息 */
	.info-stats {
		display: flex;
		justify-content: space-around;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		opacity: 0.8;
	}

	/* 功能网格 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.function-item {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.function-item:active {
		transform: scale(0.95);
	}

	.function-item.disabled {
		opacity: 0.5;
	}

	.function-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.function-emoji {
		font-size: 32rpx;
	}

	.function-name {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}

	.function-badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #ff4757;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 20rpx;
		min-width: 24rpx;
		text-align: center;
	}

	/* 升级条件 */
	.upgrade-section {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.progress-item {
		margin-bottom: 30rpx;
	}

	.progress-item:last-child {
		margin-bottom: 0;
	}

	.condition-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.condition-name {
		font-size: 28rpx;
		color: #333;
	}

	.condition-progress {
		font-size: 24rpx;
		color: #666;
	}

	.progress-bar {
		height: 8rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background-color: #52a58a;
		border-radius: 4rpx;
		transition: width 0.3s ease;
	}
</style>